<!--
 * @Author: 红星大哥 zhxlx@foxmail.com
 * @Date: 2024-07-21 14:31:28
 * @LastEditors: 红星大哥 zhxlx@foxmail.com
 * @LastEditTime: 2024-07-21 15:01:54
 * @FilePath: \esp8266\index2.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备型号DM100</title>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        font-size: calc(100% + (16 - 10) * ((100vw - 320px) / (1600 - 320))); /* 范围从10px到16px */
    }

    body {
        font-family: Arial, sans-serif;
        font-size: 1rem;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        min-height: 100vh;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
    }

    .header, .footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
        width: 100%;
    }

    .nav {
        background-color: #f1f1f1;
        padding: 20px;
        text-align: left;
        width: 25%;
    }

    .main {
        background-color: #fff;
        padding: 20px;
        text-align: center;
        width: 75%;
    }

    /* Responsive design for mobile devices */
    @media (max-width: 768px) {
        .nav, .main {
            width: 100%;
        }
    }
</style>
</head>
<body>

<div class="container">
    <div class="header">
        <h1>环境空气质量监测</h1>
    </div>
    <div class="nav">
        <h2>主页</h2>
        <ul>
            <li><a href="#history" title="历史数据为系统采集计算的1分钟实时值">历史数据</a></li>
            <li><a href="#sample" title="传感器采集相关设置">采集设置</a></li>
            <li><a href="#upload" title="数据上传相关设置">上传设置</a></li>
            <li><a href="#associate" title="环境数据报警联动">联动设置</a></li>
            <li><a href="#advance" title="系统配置，校准">高级设置</a></li>
            <li><a href="#information" title="设备信息和日志">设备信息</a></li>
            <li><a href="#contact" title="联系我们获取更多信息或提出合作请求">联系方式</a></li>
        </ul>
    </div>
    <div class="main">
        <h2>Main Content</h2>
        <p>This is the main content area.</p>
    </div>
    <div class="footer">
        <h2>联系方式</h2>
        <p>天津传仪技术有限公司</p>
    </div>
</div>

</body>
</html>